<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除选中的商品</a>

            <a class="fl" id="clearAll" href="javascript:;">清理购物车</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    var catbox = document.getElementsByClassName("catbox")[0];
    var checkAll =  document.getElementsByClassName("check-all")[0]
    var checkOneList = document.getElementsByClassName("check-one");

    catbox.onclick = function(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if(target.classList.contains("check-all")){
            console.log("点击了 check-all");
            var status = target.checked;
            for(var i=0;i<checkOneList.length;i++){
                var checkOne = checkOneList[i];
                checkOne.checked = status;
            }
        }else if(target.classList.contains("check-one")){
            var flag = true; // 假设都选中 => 如果存在未选中的 推翻假设
            for(var j=0;j<checkOneList.length;j++){
                var item = checkOneList[j];
                if(!item.checked){  // item.checked ==false
                    flag = false;
                    break;
                }
            }
            checkAll.checked = flag;
        } if(target.classList.contains("add")){
           // a.   输入框  数量 加一 
            var countInput = prev(target);
            console.log(countInput);
            var num = countInput.value;
            num++;
            countInput.value = num;  

            // b.  小计更新  =  单价*数量
            // 单价: 加号的父元素 =>前一个 =>内容
            // 数量: num 
            var parentTd = parent(target);
            var priceTd = prev(parentTd);
            var subtotalTd = next(parentTd);
            
            var price = priceTd.textContent;
            var subtotal = price * num;

            subtotalTd.textContent = subtotal.toFixed(2);

            // c. 减号按钮的 “-”  出现
            var reduce = prev(countInput);
            reduce.textContent = "-";
        }if(target.classList.contains("reduce")){
            // a. 输入框  数量 减一   （细节要求  数量为1的时候  不再减）
            var countInput = next(target);
            console.log(countInput);
            var num = countInput.value;
            // c.  减之前  判断  如果数量为1  不能减
            if(num == 1) return false;
            num--;  //自减
            // d.  减之后  判断  如果数量为1  减号按钮的 “-” 消失
            if(num == 1) target.textContent = "";

            countInput.value = num;  

            // b.  小计更新  =  单价*数量
            // 单价: 加号的父元素 =>前一个 =>内容
            // 数量: num
            var parentTd = parent(target);
            var priceTd = prev(parentTd);
            var subtotalTd = next(parentTd);
            
            var price = priceTd.textContent;
            var subtotal = price * num;

            subtotalTd.textContent = subtotal.toFixed(2);
        }

    }
   

    function getTotal() {
        // 找到选中状态的单选框  => 找到数量和小计  => 累加
        var sum = 0;
        var allPrice = 0;
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j];
            if (checkOne.checked) {
                var parentTr = parent(parent(checkOne));
                var countInput = parentTr.getElementsByClassName("count-input")[0];
                var subtotalTd = parentTr.getElementsByClassName("subtotal")[0];

                var num = countInput.value * 1;
                var subtotal = subtotalTd.textContent * 1;
                // console.log(num,subtotal);

                sum += num;
                allPrice += subtotal;
            }
        }

        selectedTotal.textContent = sum;
        priceTotal.textContent = allPrice.toFixed(2);
    }
    function isAllchecked() {
        var flag = true; // 假设都选中 => 如果存在未选中的 推翻假设
        for (var j = 0; j < checkOneList.length; j++) {
            var item = checkOneList[j];
            if (!item.checked) {  // item.checked ==false
                flag = false;
                break;
            }
        }
        checkAll.checked = checkOneList.length == 0 ? false : flag;
    }

    function parent(ele) {
        return ele.parentElement || ele.parentNode;
    }
    function prev(ele) {
        return ele.previousElementSibling || ele.previousSibling;
    }
    function next(ele) {
        return ele.nextElementSibling || ele.nextSibling;
    }

</script>

</html>